<template>
  <el-card class="content-box">
    <template #header>
      <div class="card-header">
        <span>文件内容预览</span>
      </div>
    </template>

    <!-- 使用 el-scrollbar 实现滚动 -->
    <el-scrollbar max-height="300px">
      <pre class="text-content">{{ content }}</pre>
    </el-scrollbar>
  </el-card>
</template>

<script>
export default {
  props: {
    content: {
      type: String,
      default: ''
    }
  }
};
</script>

<style scoped>
.content-box {
  /* margin-top: 20px; */
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #dcdfe6;
  background: #f6f8fa;
}

.el-card {
  max-height: 500px; /* Set the max height you want for the card */
  overflow: hidden; /* Prevent content from overflowing outside the card */
}

/* 文本样式 */
.text-content {
  white-space: pre-wrap;       /* 保留换行并自动换行 */
  word-break: break-word;      /* 防止长词溢出 */
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}
</style>
